<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>          

<nav class="navbar navbar-expand-lg navbar-light bg-light">
	  <a class="navbar-brand" href="#">规格添加</a>
</nav>

<form id="form" enctype="application/x-www-form-urlencoded" method="get">
  <div class="form-group row" >
  	<input type="hidden" name="id" value="${spec.id}">
    <label for="specName" class="col-sm-2 col-form-label">名称</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" id="specName" name="specName" value="${spec.specName}">
    </div>
  </div>
  
  <div class="form-group row">
    <label for="firstChar" class="col-sm-2 col-form-label">规格管理</label>
    <div class="col-sm-10">
     	<table id="table">
     		<tr>
     			<td>名称</td>
     			<td>排序</td>
     			<td>操作 
     			  <button type="button" class="btn btn-success btn-sm" onclick="addLine()">+</button>
     			</td>
     		</tr>
     		<c:forEach items="${spec.options}" var="o" varStatus="index">
	     		<tr>
	     			
	     			<td><input type="hidden" name="options[${index.index}].id" value="${o.id}"> <input name="options[${index.index}].optionName" value="${o.optionName}"></td>
	     			<td><input name="options[${index.index}].orders" value="${o.orders}"></td>
	     			<td>
	     				<button type="button" class="btn btn-success btn-sm">修改</button>
						<button type="button" class="btn btn-danger btn-sm" onclick="delLine($(this),${o.id})">删除</button></td>
	     		</tr>
     		</c:forEach>
     	</table>
     
    </div>
  </div>
  
  
  <div class="form-group row">
    <label for="file" class="col-sm-2 col-form-label"></label>
    <div class="col-sm-10">
      <button class="btn btn-primary mb-2" type="button" onclick="commitData()"> 提交</button>
    </div>
  </div>
  
  
</form>   
<script type="text/javascript">
  
  var index="${spec.options.size()}";

  function addLine(){
	  
	 
	  //动态追加行
	  $("#table").append(`
			  <tr>
   			<td><input name="options[`+index+`].optionName"></td>
   			<td><input name="options[`+index+`].orders"></td>
   			<td>
   				<button type="button" class="btn btn-success btn-sm">修改</button>
				<button type="button" class="btn btn-danger btn-sm" onclick="delLine($(this),0)" >删除</button></td>
   		</tr>
	  `)
	  index++;
  }

  function delLine(obj,id){
	  if(id>0)
		  $.post("../spec/delOption",{id:id},function(msgData){
			  obj.parent().parent().remove();
		  })
	  else{
		  obj.parent().parent().remove();
	  }	  
	
  }
  
	function commitData() {
		var formData = new FormData($("#form")[0]);
		$.ajax({
			url:"../spec/update",// 提交地址
			processData: false, //   application/x-www-form-urlencoded
			type:"post", // 
			contentType:false,// application/x-www-form-urlencoded
			data:formData,
			dataType:"json",  // 返回结果的数据格式
			success:function(data){
				//alert(data.code)
				$("#workContent").load("../spec/list")
			}
		})
	}

</script> 